Chart Elements

The Chart Elements provide a way for graphical representations of mapped data to be displayed at runtime. Five Chart Elements are available within the Elements gallery:

Picture showing the Charts Elements Group icon.

Although the different Chart Elements render the mapped data in different ways, they are each configured in a similar way and have similar properties.

Displays the input-mapped data as a series of solid bars, usually running horizontally, from left to right.

Once you have placed a Bar Chart Element on a page, you can edit the Element's properties to configure the Element for your requirements. Select the Element on the page to display its properties in the Properties Pane. The following properties are available:

Name and Code Name

 

Visible and Disabled Properties

 

Chart Title

Allows a title to be entered for the Bar Chart which will be displayed at the top of the chart at runtime.

 

X-Axis Title

Allows a title to be entered for the X-axis which will be displayed horizontally along the bottom of the chart at runtime.

 

Y-Axis Title

Allows a title to be entered for the Y-axis which will be displayed vertically along the left-hand side of the chart at runtime and which will run from bottom to top.

 

Height

Allows the height (in pixels) of the chart's retaining box to be set.

 

Width

Allows the width (in pixels) of the chart's retaining box to be set.

 

Chart Colour

Allows the colour of the bars on the chart to be set. Using the colour palette available via the drop-down, a standard colour can be selected. You can, if you wish, configure a non-standard colour for the bars using Red, Green, Blue & Alpha or hexadecimal values. Click the Advanced button at the bottom of the colour palette to access the advanced colour settings.

To use the advanced colour settings, move the individual sliders to the desired values for each of the RGBA components, or enter a hexadecimal value - including the hash (#) - in the box above the RGBA sliders. Alternatively, use the double-arrow slider to the right of the RGBA options to pick a colour from the block of colours displayed. The chosen colour will be displayed in the box next to the hexadecimal value. If you use the double-arrow slider, the RGB and hexadecimal values will change automatically as you move the slider up and down. The Alpha value won't change, however, and you will need to set this manually.

For RGBA, the Alpha value is the level of opacity that will be applied to the base RGB colour within the range 0-255, with 0 being the most transparent, and 255 being the most opaque. The default of 255 will be applied automatically to any colour values selected, so this will need adjusting if you wish the colour to be less opaque. To revert to standard colours, click the Standard button beneath the RGBA settings.

 

Allows you to specify data mappings for this Bar Chart.

For full details refer to the topic: Map Data to Elements.

 

Behaviour Category

Enable Tooltip

When selected, this option allows a tooltip to be displayed detailing X- and Y-axis values whenever the mouse cursor is hovered over the chart's bars at runtime.

 

Displays the input-mapped data as a series of columns, usually running vertically, from bottom to top.

Once you have placed a Column Chart Element on a page, you can edit the Element's properties to configure the Element for your requirements. Select the Element on the page to display its properties in the Properties Pane. The following properties are available:

Name and Code Name

 

Visible and Disabled Properties

 

Chart Title

Allows a title to be entered for the Column Chart which will be displayed at the top of the chart at runtime.

 

X-Axis Title

Allows a title to be entered for the X-axis which will be displayed horizontally along the bottom of the chart at runtime.

 

Y-Axis Title

Allows a title to be entered for the Y-axis which will be displayed vertically along the left-hand side of the chart at runtime and which will run from bottom to top.

 

Height

Allows the height (in pixels) of the chart's retaining box to be set.

 

Width

Allows the width (in pixels) of the chart's retaining box to be set.

 

Chart Colour

Allows the colour of the columns on the chart to be set. Using the colour palette available via the drop-down, a standard colour can be selected. You can, if you wish, configure a non-standard colour for the bars using Red, Green, Blue & Alpha or hexadecimal values. Click the Advanced button at the bottom of the colour palette to access the advanced colour settings.

To use the advanced colour settings, move the individual sliders to the desired values for each of the RGBA components, or enter a hexadecimal value - including the hash (#) - in the box above the RGBA sliders. Alternatively, use the double-arrow slider to the right of the RGBA options to pick a colour from the block of colours displayed. The chosen colour will be displayed in the box next to the hexadecimal value. If you use the double-arrow slider, the RGB and hexadecimal values will change automatically as you move the slider up and down. The Alpha value won't change, however, and you will need to set this manually.

For RGBA, the Alpha value is the level of opacity that will be applied to the base RGB colour within the range 0-255, with 0 being the most transparent, and 255 being the most opaque. The default of 255 will be applied automatically to any colour values selected, so this will need adjusting if you wish the colour to be less opaque. To revert to standard colours, click the Standard button beneath the RGBA settings.

 

Allows you to specify data mappings for this Column Chart.

For full details refer to the topic: Map Data to Elements.

 

Behaviour Category

Enable Tooltip

When selected, this option allows a tooltip to be displayed detailing X- and Y-axis values whenever the mouse cursor is hovered over the chart's columns at runtime.

Displays the input-mapped data as the percentage sections of a coloured donut. Note that the colours of the sections can't be edited in the way that the colours of value components on other chart types can.

Once you have placed a Donut Chart Element on a page, you can edit the Element's properties to configure the Element for your requirements. Select the Element on the page to display its properties in the Properties Pane. The following properties are available:

Name and Code Name

 

Visible and Disabled Properties

 

Chart Title

Allows a title to be entered for the Donut Chart which will be displayed at the top of the chart at runtime. Note that the legends/labels for the items contained within the donut will also run along the top of the chart, accompanied by a colour guide for each separate section.

 

Inner Radius

Allows the radius (in pixels) of the white space in the centre of the Donut Chart to be set.

 

End Angle

Allows a degrees value to be set in order for the Donut Chart to be rendered as a whole- or part-circle, as illustrated below. If, for example, 360 degrees is entered, the Donut Chart will display as a whole circle. If 270 degrees is entered, the Donut Chart will display as a three-quarter circle. For 180 degrees, the Donut Chart will display as a semi-circle, and so on.

Picture showing Degrees for Donut Chart.

Height

Allows the height (in pixels) of the chart's retaining box to be set.

 

Width

Allows the width (in pixels) of the chart's retaining box to be set.

 

Allows you to specify data mappings for this Donut Chart.

For full details refer to the topic: Map Data to Elements.

 

Behaviour Category

Enable Tooltip

When selected, this option allows a tooltip to be displayed which will contain label and value information whenever the mouse cursor is hovered over the chart's sections at runtime.

Displays the input-mapped data as a continuous line, usually running across the chart from left to right.

Once you have placed a Line Chart Element on a page, you can edit the Element's properties to configure the Element for your requirements. Select the Element on the page to display its properties in the Properties Pane. The following properties are available:

Name and Code Name

 

Visible and Disabled Properties

 

Chart Title

Allows a title to be entered for the Line Chart which will be displayed at the top of the chart at runtime.

 

X-Axis Title

Allows a title to be entered for the X-axis which will be displayed horizontally along the bottom of the chart at runtime.

 

Y-Axis Title

Allows a title to be entered for the Y-axis which will be displayed vertically along the left-hand side of the chart at runtime and which will run from bottom to top.

 

Height

Allows the height (in pixels) of the chart's retaining box to be set.

 

Width

Allows the width (in pixels) of the chart's retaining box to be set.

 

Chart Colour

Allows the colour of the line to be set. Using the colour palette available via the drop-down, a standard colour can be selected. You can, if you wish, configure a non-standard colour for the bars using Red, Green, Blue & Alpha or hexadecimal values. Click the Advanced button at the bottom of the colour palette to access the advanced colour settings.

To use the advanced colour settings, move the individual sliders to the desired values for each of the RGBA components, or enter a hexadecimal value - including the hash (#) - in the box above the RGBA sliders. Alternatively, use the double-arrow slider to the right of the RGBA options to pick a colour from the block of colours displayed. The chosen colour will be displayed in the box next to the hexadecimal value. If you use the double-arrow slider, the RGB and hexadecimal values will change automatically as you move the slider up and down. The Alpha value won't change, however, and you will need to set this manually.

For RGBA, the Alpha value is the level of opacity that will be applied to the base RGB colour within the range 0-255, with 0 being the most transparent, and 255 being the most opaque. The default of 255 will be applied automatically to any colour values selected, so this will need adjusting if you wish the colour to be less opaque. To revert to standard colours, click the Standard button beneath the RGBA settings.

 

Allows you to specify data mappings for this Line Chart.

For full details refer to the topic: Map Data to Elements.

 

Behaviour Category

Enable Tooltip

When selected, this option allows a tooltip to be displayed detailing X- and Y-axis values whenever the mouse cursor is hovered over the chart's line at runtime.

 

Displays the input-mapped data as the percentage sections of a coloured pie. Note that the colours of the sections can't be edited in the way that the colours of value components on other chart types can.

Once you have placed a Pie Chart Element on a page, you can edit the Element's properties to configure the Element for your requirements. Select the Element on the page to display its properties in the Properties Pane. The following properties are available:

Name and Code Name

 

Visible and Disabled Properties

 

Chart Title

Allows a title to be entered for the Pie Chart which will be displayed at the top of the chart at runtime. Note that the legends/labels for the items contained within the pie will also run along the top of the chart, accompanied by a colour guide for each separate section.

 

Inner Radius

Allows the radius (in pixels) of the white space in the centre of the Pie Chart to be set.

 

End Angle

Allows a degrees value to be set in order for the Pie Chart to be rendered as a whole- or part-circle, as illustrated below. If, for example, 360 degrees is entered, the Pie Chart will display as a whole circle. If 270 degrees is entered, the Pie Chart will display as a three-quarter circle. For 180 degrees, the Pie Chart will display as a semi-circle, and so on.

Picture showing Degrees for Pie Chart.

Height

Allows the height (in pixels) of the chart's retaining box to be set.

 

Width

Allows the width (in pixels) of the chart's retaining box to be set.

 

Allows you to specify data mappings for this Pie Chart.

For full details refer to the topic: Map Data to Elements.

 

Behaviour Category

Enable Tooltip

When selected, this option allows a tooltip to be displayed which will contain label and value information whenever the mouse cursor is hovered over the chart's sections at runtime.